<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3.js</title>
    <!-- <script src="d3.v7.min.js"></script> -->
    <script src="jquery-3.6.4.js"></script>
    <script src="d3.v5.js"></script>
    <style>
        .chartd3{
            background: #eee;
        }
        .heavy{
            font: bold 30px sans-serf;
        }

    </style>
</head>
<body>

    <p> 111 </p>
    <p> 222 </p>

    <div class="canva">
        
    </div>

    <div class="canva2">
        <svg>
           
        </svg>
    </div>


    <svg width="300px" heght="300px">
        <circle cx="150" cy="35" r="30" fill="yellow" 
        stroke="black"
        stroke-width="5px"></circle>

    </svg>
   
        <!-- <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <line x1="10" y1="20" x2="20" y2="20" stroke="black" />
        </svg> -->
    
</body>
<script>
    var data = [
         {"name":"a","start":20230201,"end":20230501},
         {"name":"a","start":20230502,"end":20230901},
         {"name":"b","start":20230301,"end":20230303},
         {"name":"c","start":20230601,"end":20230801},
         {"name":"d","start":20230901,"end":20231001},
         {"name":"e","start":20230201,"end":20231001},
         {"name":"e","start":20231002,"end":20240101},

     ]
   

   const canvas = d3.select(".canva");
   console.log(canvas);
   const svg = canvas.append("svg");
   svg.attr('width',300 )
     .attr('height',300);
   const circle = svg.append("circle")
   .attr('cx',50)
   .attr('cy',50)
   .attr('r',40)
   .attr('fill','red');

   //rect
   svg.append("rect").attr('height',100)
   .attr('width',100)
   .attr('x',150)
   .attr('rx',15)
   .attr('ry',15)

  // line
   svg.append("line").
     attr('x1',0).
     attr('y1',0)
     .attr('y2',60)
     .attr('x2',60)
     .attr('opacity',0.4)
     .attr('stroke-width',6)
     .attr('stroke','blue');

   // data
   var data = [ 1,2,2,3,6]
   d3.select("body").selectAll("p")
   .data(data)
   .enter()
   .append("p")
   .text(' ddd')

   svg.append("text")
   .text("兼")
   .attr('x',10 )
   .attr('y',150 )
  // .attr('class',"heavy" ) //自定义css
   .attr('fill','red' )
   .attr('font-size',50 ) // 和class冲突的话，之前的class优先
  svg.append("circle")
  .attr('cx', 35)
  .attr('cy', 133)
  .attr('r', 30)
  .attr('fill', "none")
  .attr('stroke',"red" )
  .attr('stroke-width',"2" )
  


  svg.append("text")
   .text("新")
   .attr('x',100 )
   .attr('y',150 )
  // .attr('class',"heavy" ) //自定义css
   .attr('fill','red' )
   .attr('stroke','black' )
   .attr('font-size',50 ) // 和class冲突的话，之前的class优先
   .attr('text-anchor',"start" ) // start 最右边，middle中间，end最左边
  svg.append("circle")
  .attr('cx', 125)
  .attr('cy', 133)
  .attr('r', 30)
  .attr('fill', "none")
  .attr('stroke',"red" )
  .attr('stroke-width',"2" )
  



 const canvas2 = d3.select(".canva2")
 var dataArray = [4,5,13]
//  const svg2 = canvas2.append("svg")
//         .attr('width',600 )
//         .attr('height',600 );
const svg2 =d3.select(".canva2 svg")
//  const rect = svg2.append("rect")
const rect = svg2.selectAll("rect")

rect.data(dataArray)
    .enter().append("rect")
    .attr('x', function(d,i){
        console.log(d,i);
        return (i)*25;
    })
    // .attr('y',function(d,i){
    //     return 200 - d*3;
    // } )
     .attr('width', 24 )
     .attr('height', function(d,i){
        //return d*3;
        return 90;
     })
     .style('fill', 'orange');
 

</script>

</html>